<template>
  <div>
    <div class="addressBox">
      <div class="addlistBox">
        <p class="addlist_title">地址簿</p>
        <!-- 用户信息 姓名 电话 -->
        <div class="addresswrap" v-for="(item,i) in siteForm" :key="i">
          <!-- class="default_address" -->
          <!-- 1 默认  0 其他 -->
          <span v-if="item.defaultStatus == 1" class="default_address" >
            🖤 默认地址
          </span>
      
        
          <div class="addresswrap1">
            <div class="user_info">
              <p> {{item.userName}}</p>
              <p class="user_info_phone">{{item.userPhone}}</p>
            </div>
            <div class="adres_detail">
              <div class="adres_info">{{item.adinfo}} {{item.detailInfo}}</div>
            </div>
          </div>
          <div class="update_btns">
            <span @click="del_address(item.addressid)">删除地址</span> 
            <button class="updateBtn"  @click="updateSiteForm(item.addressid)">编辑</button>
          </div>
        </div>
       
      </div>
    </div>
    <div class="addSitesBox">
        <button class="addAdbtn" @click="openPanel()"><p>添加地址</p></button>
    </div>

    <!-- //新增 -->
    <popCard ref="popsiteForm" 
    :showFs="popShow" 
     @submitToParent="saveSite" 
    @closePanel="closePanel" v-show="popcardshow" ></popCard>


    <popAddressUpdate ref="updateAddress"  @submitUpdateToParent="updateSite" 
    v-show="updateSiteshow"  @upClosePanel="closeUpdatePanel" :updateAddress=popUpdateform></popAddressUpdate>
  </div>
  
</template>

<script>
import popCard from '../../pops/popCard.vue'  
import popAddressUpdate from '../../pops/popAddressUpdate.vue'
export default {
   components: {
      popCard,popAddressUpdate
  },
  inject: [
    "MyMessage","reload"
  ],
  name: 'userAddress',
  data () {
    return {
      msg: '',
      popcardshow:false,
      updateSiteshow:false,
      popShow:"添加",
      // updateSiteFs:"编辑",
      popUpdateform:{
        // checkStatus:true,
        id:'',
        name: '',
        lastname:'',
        phone: '',
        address:[],
        addressInfo:'', 
        addressDetail:'',
        default:false,
        formshow:false,
      },
      siteForm:[],
      siteForm2: [
        {
          id:1,
        name: '罗',
        lastname:'摩达',
        phone: '14499882838',
        address:[],
        addressInfo:'四川省成都市锦江区',
        addressDetail:'沙河街道沙河壹号2期',
        addefault:true,
        formshow:true,
      },
        
      ],
    }
  },
  mounted () {
    this.querySiteList();
  },
  computed:{

  },
  methods: {


    //获取所有地址列表
    querySiteList(){
      let formData = {
        userId:localStorage.userId
      }
       this.$axios.post('/addressinfo/getAddressList', formData)
      .then(res => {
        // console.log(res.data.data);
        if(res.data.data){
          this.siteForm = res.data.data
        }else{
          console.log("获取地址数据失败");
        }
        
      })
    },

    // 添加地址
    openPanel(){
      this.popcardshow = true;
    },
    //删除地址
    del_address(val){
      this.$axios.post('/addressinfo/delAddress', {'addressId':val})
      .then(res => {
        if(res.data.data){
          this.MyMessage("删除成功")
          this.reload();
        }else{
           this.MyMessage("删除失败,服务器异常")
        }
        
      })
    },
    closePanel(data){
      this.popcardshow = data;
    },
     closeUpdatePanel(data){
      this.updateSiteshow = data;
    },
    saveSite(data){
      // this.siteForm[0] = data;
      //设置默认地址时，新设置的地址自动排到第一行 默认地址状态修改
      this.popcardshow = this.siteForm.formshow;//状态
      console.log(data);
      let addressDafault = 0;
      if(data.addefault == false){//其他
        addressDafault = 0
      }else{ //默认
        addressDafault = 1
      }
       let userName = data.name + data.lastname
      //userid  addressId userName userPhone adInfo detailInfo adStatus
      let formData = {
          userId:localStorage.userId,
          addressId:888,  //新增随便用个id
          userName:userName,
          userPhone:data.phone,
          adInfo:data.addressInfo,
          detailInfo:data.addressDetail,
          adStatus:addressDafault
      }
      this.$axios.post('/addressinfo/addAddress', formData)
      .then(res => {
        // console.log(res.data.data);
        if(res.data.data){
          this.reload();
        }else{
          console.log("添加地址失败");
        }
        
      })

    },
    // 传递更新地址信息
    updateSiteForm(id){
     
      let updateForm = this.siteForm.filter(item => item.addressid == id)
      this.popUpdateform.id = updateForm[0].addressid;
      this.popUpdateform.name = updateForm[0].userName;
      this.popUpdateform.lastname = '';
      this.popUpdateform.phone = updateForm[0].userPhone;
      this.popUpdateform.address = [];
      this.popUpdateform.addressInfo = updateForm[0].adinfo;
      this.popUpdateform.addressDetail = updateForm[0].detailInfo;
      if(updateForm[0].defaultStatus==0){
         this.popUpdateform.default = false;
      }else if(updateForm[0].defaultStatus==1){
        this.popUpdateform.default = true;
      }
      this.popUpdateform.formshow = false;
      this.updateSiteshow = true;
      console.log(this.popUpdateform.default);
      
    },
    //实现地址修改
    updateSite(data){//接受
       console.log(data)
       this.updateSiteshow = this.popUpdateform.formshow;//状态
      let addressDafault = 0;
      if(data.default == false){//其他
        addressDafault = 0
      }else{ //默认
        addressDafault = 1
      }
      let formData = {
        userId:localStorage.userId,
        adreesId:data.id,
        userName:data.name,
        userPhone:data.phone,
        adInfo:data.addressInfo,
        detailInfo:data.addressDetail,
        adStatus:addressDafault,
      }
       this.$axios.post('/addressinfo/updateAddress', formData)
      .then(res => {
        // console.log(res.data.data);
        if(res.data.data){
          console.log("地址修改成功");
          this.reload();
        }else{
          console.log("获取地址数据失败");
        }
        
      })
    }
  },

}
</script>

<style scoped>
div{
    margin: 0;
}

.addressBox{
  /* border: 1px solid red; */
  width: 60%;
}
addlistBox{
margin: 0;
}
.addlist_title{
  font-size: 28px;
  font-weight: 700;
}
.addresswrap{
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
  border-bottom: 1px solid gainsboro;
}
.addresswrap1{
  position: relative;
  /* left: -70px; */
  display: flex;
  flex-direction: column;
}
.default_address{
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: .5px;
    font-family: AdihausDIN,PingFang SC,sans-serif,微软雅黑;
    font-style: normal;
    color: #000;
}
.default_addressNo{
  display: none;
}
.user_info{
  margin-top: -20px;
  display: flex;
}
.user_info_phone{
  margin-left: 20px;
  position: relative;
  top: 2px;
}
.adres_detail{
position: relative;
top: -10px;
}
.adres_detail{
  font-size: 15px;
  font-weight: 600;
  width: 300px;
}
.update_btns span{
cursor: pointer;
    font-family: AdihausDIN,PingFang SC,sans-serif,微软雅黑;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 1px;
    color: #000;
    border-bottom: 1px solid #000;
    position: relative;
}
.update_btns span:hover{
   color: rgb(90, 90, 90);
}
.updateBtn{
 /* margin-left:70px; */
    min-height: 50px;
    min-width: 80px;
    border-radius: 50px;

    align-items: center;
    background: #111;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: .2s;
}
.updateBtn:hover{
    background: rgb(47, 44, 44);
    color: rgb(255, 254, 254);
}

.addSitesBox{
position: relative;
top: -20px;
}
.addAdbtn{
  min-height: 50px;
    min-width: 80px;
    border-radius: 1px;

    align-items: center;
    background: #111;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    transition: .2s;
}
</style>
